<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTools ref="pageDom" @properties-search="searchFn">
        <template #btTitle>
          <el-button size="small" type="primary" @click="addFn">添加房产</el-button>
        </template>
        <!-- 下拉框 -->
        <template #isSelect>
          <!-- 分类下拉列表 -->
          <el-select v-model="categories" class="select" placeholder="全部分类">
            <el-option :value="''">全部分类</el-option>
            <el-option
              v-for="item in categoriesData"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
          <!-- 经纪下拉列表 -->
          <el-select v-model="agent" class="select" placeholder="全部经纪">
            <el-option :value="''">全部经纪</el-option>
            <el-option
              v-for="item in agentData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </template>
        <template #tableBody>
          <div class="table-box">
            <el-table
              :data="formData"
              border
              style="width: 100%"
            >
              <el-table-column
                v-slot="{row}"
                prop="image"
                label="封面"
              >
                <img style="width:100%;height:120px" :src="row.image" alt="">
              </el-table-column>
              <el-table-column
                prop="title"
                label="标题"
              />
              <el-table-column
                v-slot="{row}"
                prop="tags"
                label="标签"
              >
                <el-tag v-for="item in row.tags" :key="item">{{ item }}</el-tag>
              </el-table-column>
              <el-table-column
                prop="address"
                label="地址"
              />
              <el-table-column
                v-slot="{row}"
                prop="category"
                label="分类"
              >
                {{ row.category.title }}
              </el-table-column>
              <el-table-column
                v-slot="{row}"
                prop="agent"
                label="经纪"
              >
                {{ row.agent===null?'':row.agent.name }}
              </el-table-column>
              <el-table-column
                prop="price"
                label="价格"
              />
              <el-table-column
                prop="desc"
                label="介绍"
              />
              <el-table-column
                v-slot="{row}"
                prop="photos"
                label="图片"
              >
                <img
                  v-for="item in row.photos"
                  :key="item"
                  style="width:100%;height:120px"
                  :src="item"
                  alt=""
                >
              </el-table-column>

              <el-table-column v-slot="{row}" label="操作" width="200">
                <template>
                  <el-button type="primary" size="small" @click="editFn(row.id)">编辑</el-button>
                  <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-row type="flex" justify="center" style="margin-top:20px">
            <el-pagination
              :page-size="limit"
              layout="prev, pager, next"
              :total="total"
              @current-change="currentChange"
            />
          </el-row>
        </template>
      </PageTools>
      <AddProperties ref="putById" :show-dialog.sync="showDialog" @updateEvent="getProperties" />
    </div>
  </div>
</template>

<script>
import PageTools from '@/views/pages/components/pagetools.vue'
import AddProperties from './components/AddProperties.vue'
import { getCategories, getAgents, getPropertiesList, getListById, delPropertiesList, getPropertiesListUrl } from '@/api/properties'
export default {
  components: { PageTools, AddProperties },
  data() {
    return {
      formData: [],
      agentData: [],
      categoriesData: [],
      categories: '',
      agent: '',
      total: 0,
      limit: 2,
      start: 0,
      showDialog: false,
      urlStr: ''
    }
  },
  created() {
    this.getProperties()
  },
  methods: {
    // 新增函数
    addFn() {
      this.showDialog = true
    },
    // 渲染页面
    async getProperties() {
      // 分类列表
      const resCategories = await getCategories()
      console.log(resCategories)
      // 经纪人列表
      const resAgents = await getAgents()
      // 房产列表
      const resProperties = await getPropertiesList()
      this.agentData = resAgents.data
      this.categoriesData = resCategories.data

      // 获得指定数量的房产列表
      const curProperties = await getPropertiesList({
        _limit: this.limit,
        _start: this.start
      })
      // 渲染当前页
      this.formData = curProperties.data
      // 分页器总数
      this.total = resProperties.data.length
    },
    // 编辑函数
    async editFn(id) {
      const res = await getListById(id)
      console.log(res, 178)
      this.$refs.putById.formData = res.data
      this.showDialog = true
    },
    // 删除函数
    delFn(id) {
      this.$confirm('您确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delPropertiesList(id)
        this.getProperties()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页器改变
    currentChange(page) {
      // 判断当点击分页器的时候是否处于模糊搜索
      if (this.urlStr) {
        this.start = (page - 1) * this.limit
        // 如果是那就得再次调用模糊搜索的函数
        this.searchFn()
      } else {
        this.start = (page - 1) * this.limit
        this.getProperties()
      }
    },
    // 模糊搜索
    async searchFn() {
      // 拿到搜索框的值
      const str = this.$refs.pageDom.searchData
      // 输入框是否有值
      const a = str ? `title_contains=${str}` : ''
      // 全部分类是否有值
      const b = this.categories ? `category=${this.categories}` : ''
      // 房产经纪是否有值
      const c = this.agent ? `agent=${this.agent}` : ''
      const arr = [a, b, c]
      // 过滤出不为空的参数
      const arr2 = arr.filter(v => {
        if (v !== '') {
          return v
        }
      })
      // 数组转字符串
      this.urlStr = arr2.join('&')
      const urlStrSin = `_start=${this.start}&_limit=${this.limit}&` + this.urlStr
      // 获取搜索总数
      const tot = await getPropertiesListUrl(this.urlStr)
      this.total = tot.data.length
      // 请求指定条数数据
      const res = await getPropertiesListUrl(urlStrSin)

      this.formData = res.data
    }

  }
}
</script>

<style lang="scss" scoped>
.table-box{
  margin-top:20px ;
  padding-top:20px ;
  padding-bottom:20px;
    width: 100%;
    border-top: 1px solid #e0e3e9;
    border-bottom: 1px solid #e0e3e9;
}
</style>
